<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>基础管理 - 智慧粮库测控平台</title>
    <link rel="stylesheet" href="../css/theme.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/settings.css">
    <link rel="stylesheet" href="../css/config.css">
    <link rel="stylesheet" href="../css/operation-logs.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../layui-v2.8.17/layui/css/layui.css">
</head>
<body>
    <!-- 公共头部 -->
    <header class="common-header"></header>

    <!-- 主体内容区域 -->
    <div class="main-container">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <div class="menu-item active" data-content="device-management">
                <i class="layui-icon layui-icon-console"></i> 设备管理
            </div>
            <div class="menu-item" data-content="user-management">
                <i class="layui-icon layui-icon-user"></i> 用户管理
            </div>
            <div class="menu-item" data-content="ventilation">
                <i class="layui-icon layui-icon-spread-left"></i> 智能通风
            </div>
            <div class="menu-item" data-content="aircondition">
                <i class="layui-icon layui-icon-template-1"></i> 空调控温
            </div>
            <div class="menu-item" data-content="threshold-settings">
                <i class="layui-icon layui-icon-chart"></i> 阈值设置
            </div>
            <div class="menu-item" data-content="operation-logs">
                <i class="layui-icon layui-icon-file"></i> 操作日志
            </div>
            <div class="menu-item" data-content="account-info">
                <i class="layui-icon layui-icon-set"></i> 账号信息
            </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="content-area">
            <!-- 设备管理内容 -->
            <div class="content-section active" id="device-management">
                <div class="device-management-container">
                    <div class="page-header">
                        <div class="header-actions">
                            <div class="search-container">
                                <input type="text" id="device-search" placeholder="搜索设备名称或IP" class="search-input">
                            </div>
                            <!-- <button id="refresh-device-btn" class="btn btn-primary">
                                <span class="btn-icon iconfont icon-refresh"></span>刷新
                            </button> -->
                            <button id="add-device-btn" class="btn btn-primary">
                                <span class="btn-icon iconfont icon-add"></span>添加
                            </button>
                        </div>
                    </div>
                    
                    <div class="device-list-container">
                        <div id="device-list">
                            <!-- 设备列表将通过JavaScript动态生成 -->
                            <div class="empty-list">正在加载设备列表...</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 用户管理内容 -->
            <div class="content-section" id="user-management">
                <div class="device-management-container">
                    <div class="page-header">
                        <div class="header-actions">
                            <div class="search-container">
                                <input type="text" id="user-search" placeholder="搜索用户名、姓名或登录时间" class="search-input">
                            </div>
                            <button id="add-user-btn" class="btn btn-primary">
                                <span class="btn-icon iconfont icon-add"></span>添加
                            </button>
                        </div>
                    </div>
                    
                    <div class="device-list-container">
                        <div id="user-list">
                            <!-- 用户列表将通过JavaScript动态生成 -->
                            <div class="empty-list">正在加载用户列表...</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 智能通风内容 -->
            <div class="content-section" id="ventilation">
                <div class="config-header">
                    <h3>智能通风参数配置</h3>
                    <button class="control-button sync-all-btn">
                        <i class="layui-icon layui-icon-refresh"></i> 全部同步
                    </button>
                </div>
                <div class="device-list-container" style="margin: 0; border-radius: 0; background: transparent;">
                    <table class="device-table ventilation-table">
                        <thead>
                            <tr>
                                <th class="device-type-header">设备类型</th>
                                <th>目标温度</th>
                                <th>目标湿度</th>
                                <th>应用时间段</th>
                                <th>持续时长 (分钟)</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 自然通风窗 -->
                            <tr data-device-type="自然通风窗">
                                <td class="device-type-cell">自然通风窗</td>
                                <td data-param="temp"><span class="value-text">25</span><span class="value-unit">℃</span></td>
                                <td data-param="humidity"><span class="value-text">60</span><span class="value-unit">%</span></td>
                                <td data-param="time-range"><span class="value-text">08:00-18:00</span></td>
                                <td data-param="duration"><span class="value-text">30</span></td>
                                <td><button class="control-button edit-btn">修改</button></td>
                            </tr>
                            <!-- 轴流风机 -->
                            <tr data-device-type="轴流风机">
                                <td class="device-type-cell">轴流风机</td>
                                <td data-param="temp"><span class="value-text">25</span><span class="value-unit">℃</span></td>
                                <td data-param="humidity"><span class="value-text">60</span><span class="value-unit">%</span></td>
                                <td data-param="time-range"><span class="value-text">08:00-18:00</span></td>
                                <td data-param="duration"><span class="value-text">30</span></td>
                                <td><button class="control-button edit-btn">修改</button></td>
                            </tr>
                            <!-- 环流风机 -->
                            <tr data-device-type="环流风机">
                                <td class="device-type-cell">环流风机</td>
                                <td data-param="temp"><span class="value-text">25</span><span class="value-unit">℃</span></td>
                                <td data-param="humidity"><span class="value-text">60</span><span class="value-unit">%</span></td>
                                <td data-param="time-range"><span class="value-text">08:00-18:00</span></td>
                                <td data-param="duration"><span class="value-text">30</span></td>
                                <td><button class="control-button edit-btn">修改</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 空调控温内容 -->
            <div class="content-section" id="aircondition">
                <div class="config-header">
                    <h3>空调控温参数配置</h3>
                </div>
                <div class="config-content">
                    <!-- 空调控温配置内容 -->
                    <div class="empty-list">空调控温配置功能开发中...</div>
                </div>
            </div>
            
            <!-- 阈值设置内容 -->
            <div class="content-section" id="threshold-settings">
                <div class="config-header">
                    <h3>粮库监测阈值设置</h3>
                </div>
                <div class="device-list-container" style="margin: 0; border-radius: 0; background: transparent;">
                    <table class="device-table ventilation-table">
                        <thead>
                            <tr>
                                <th class="device-type-header">监测项目</th>
                                <th>下限阈值</th>
                                <th>上限阈值</th>
                                <th>单位</th>
                                <th>描述</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-param-type="temperature">
                                <td class="device-type-cell">粮库温度</td>
                                <td data-param="min"><span class="value-text">5</span><span class="value-unit">℃</span></td>
                                <td data-param="max"><span class="value-text">35</span><span class="value-unit">℃</span></td>
                                <td>℃</td>
                                <td>粮食储存适宜温度范围</td>
                                <td><button class="control-button edit-btn btn-edit-threshold" data-permission="manage_config">修改</button></td>
                            </tr>
                            <tr data-param-type="humidity">
                                <td class="device-type-cell">粮库湿度</td>
                                <td data-param="min"><span class="value-text">45</span><span class="value-unit">%</span></td>
                                <td data-param="max"><span class="value-text">75</span><span class="value-unit">%</span></td>
                                <td>%</td>
                                <td>粮食储存适宜湿度范围</td>
                                <td><button class="control-button edit-btn btn-edit-threshold" data-permission="manage_config">修改</button></td>
                            </tr>
                            <tr data-param-type="pest">
                                <td class="device-type-cell">虫情浓度</td>
                                <td data-param="min"><span class="value-text">0</span><span class="value-unit">只/kg</span></td>
                                <td data-param="max"><span class="value-text">20</span><span class="value-unit">只/kg</span></td>
                                <td>只/kg</td>
                                <td>粮食虫害警戒阈值</td>
                                <td><button class="control-button edit-btn btn-edit-threshold" data-permission="manage_config">修改</button></td>
                            </tr>
                            <tr data-param-type="oxygen">
                                <td class="device-type-cell">氧气浓度</td>
                                <td data-param="min"><span class="value-text">19</span><span class="value-unit">%</span></td>
                                <td data-param="max"><span class="value-text">23</span><span class="value-unit">%</span></td>
                                <td>%</td>
                                <td>安全氧气浓度范围</td>
                                <td><button class="control-button edit-btn btn-edit-threshold" data-permission="manage_config">修改</button></td>
                            </tr>
                            <tr data-param-type="co2">
                                <td class="device-type-cell">二氧化碳浓度</td>
                                <td data-param="min"><span class="value-text">0</span><span class="value-unit">%</span></td>
                                <td data-param="max"><span class="value-text">0.5</span><span class="value-unit">%</span></td>
                                <td>%</td>
                                <td>安全二氧化碳浓度范围</td>
                                <td><button class="control-button edit-btn btn-edit-threshold" data-permission="manage_config">修改</button></td>
                            </tr>
                            <tr data-param-type="ph3">
                                <td class="device-type-cell">磷化氢浓度</td>
                                <td data-param="min"><span class="value-text">0</span><span class="value-unit">mg/m³</span></td>
                                <td data-param="max"><span class="value-text">0.01</span><span class="value-unit">mg/m³</span></td>
                                <td>mg/m³</td>
                                <td>安全磷化氢浓度范围</td>
                                <td><button class="control-button edit-btn btn-edit-threshold" data-permission="manage_config">修改</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <!-- 操作日志内容 -->
            <div class="content-section" id="operation-logs">
                <div class="device-management-container">
                    <!-- 隐藏整个头部筛选区域 -->
                    <div class="page-header" style="display: none;">
                        <div class="header-actions">
                            <!-- 隐藏搜索框 -->
                            <div class="search-container" style="display: none;">
                                <input type="text" id="log-search" placeholder="搜索用户名或操作内容" class="search-input">
                            </div>
                            <!-- 隐藏查询条件区域 -->
                            <div class="filter-item" style="display: none;">
                                <label>操作类型：</label>
                                <select id="operation-type-filter">
                                    <option value="">全部</option>
                                    <option value="DEVICE_CONTROL">设备控制</option>
                                </select>
                            </div>
                            <div class="filter-item" style="display: none;">
                                <label>操作状态：</label>
                                <select id="operation-status-filter">
                                    <option value="">全部</option>
                                    <option value="SUCCESS">成功</option>
                                    <option value="FAILED">失败</option>
                                </select>
                            </div>
                            <button id="refresh-logs-btn" class="control-button">
                                <i class="layui-icon layui-icon-refresh"></i> 刷新
                            </button>
                        </div>
                    </div>
                    
                    <div class="logs-table-container">
                        <table class="device-table" id="operation-logs-table">
                            <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>操作内容</th>
                                    <th>操作时间</th>
                                    <!-- 隐藏操作类型列 -->
                                    <th style="display: none;">操作类型</th>
                                    <th>操作状态</th>
                                    <th>错误信息</th>
                                </tr>
                            </thead>
                            <tbody id="logs-table-body">
                                <tr>
                                    <td colspan="6" class="empty-list">正在加载操作日志...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页容器，将由通用分页组件填充 -->
                    <div id="logs-pagination"></div>
                </div>
            </div>

            <!-- 账号信息内容 -->
            <div class="content-section" id="account-info">
        <!-- 内容区域 -->
        <div class="settings-content">
            <!-- 账号信息内容 -->
            <div class="settings-card">
                <h2 class="settings-title">账号信息</h2>
                <p class="settings-subtitle">查看和管理您的账号信息</p>
                
                <div class="account-info-container">
                    <div class="account-avatar">
                        <i class="layui-icon layui-icon-user"></i>
                    </div>
                    <div class="account-details">
                        <div class="account-item">
                            <div class="account-label">用户名</div>
                            <div class="account-value" id="username">admin</div>
                        </div>
                        <div class="account-row">
                            <div class="account-item flex-item">
                                <div class="account-label">角色</div>
                                <div class="account-value" id="role">系统管理员</div>
                            </div>
                            <div class="account-item flex-item">
                                <div class="account-label">上次登录</div>
                                <div class="account-value" id="last-login"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="account-actions">
                    <button id="logout-btn" class="action-btn danger-btn">
                        <i class="layui-icon layui-icon-logout"></i> 退出登录
                    </button>
                </div>
            </div>

            <!-- 主题设置内容 -->
            <div class="settings-card">
                <h2 class="settings-title">主题颜色设置</h2>
                <p class="settings-subtitle">选择您喜欢的系统主题颜色</p>
                
                <div class="theme-options compact">
                    <button class="theme-option active" data-theme="default">蓝色</button>
                    <button class="theme-option" data-theme="green">绿色</button>
                    <button class="theme-option" data-theme="purple">紫色</button>
                    <button class="theme-option" data-theme="orange">橙色</button>
                    <button class="theme-option" data-theme="dark">暗色</button>
                </div>
            </div>

            <!-- 系统信息内容 -->
            <div class="settings-card" style="display: none;">
                <h2 class="settings-title">系统信息</h2>
                <p class="settings-subtitle">查看系统版本和相关信息</p>
                
                <div class="system-info-list">
                    <div class="info-row">
                        <div class="info-item">
                            <div class="info-label">系统版本</div>
                            <div class="info-value">v1.0.0</div>
                        </div>
                        <div class="info-item">
                            <div class="info-label">发布日期</div>
                            <div class="info-value">2023-06-01</div>
                        </div>
                    </div>
                </div>
                
                <div class="system-actions">
                    <button id="check-update-btn" class="action-btn">
                        <i class="layui-icon layui-icon-refresh"></i> 检查更新
                    </button>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
    
    <!-- 修改通风参数对话框 -->
    <div id="edit-ventilation-dialog" class="modal common-modal" style="display: none;">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="edit-dialog-title">修改参数</h2>
                <span class="close-btn">&times;</span>
            </div>
            <div class="modal-body">
                <form class="common-form" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                    <div class="form-group">
                        <label for="edit-temp">目标温度 (°C)</label>
                        <input type="number" id="edit-temp" placeholder="请输入目标温度">
                    </div>
                    <div class="form-group">
                        <label for="edit-humidity">目标湿度 (%)</label>
                        <input type="number" id="edit-humidity" placeholder="请输入目标湿度">
                    </div>
                    <div class="form-group">
                        <label for="edit-start-time">应用开始时间</label>
                        <input type="text" id="edit-start-time" placeholder="请选择开始时间">
                    </div>
                    <div class="form-group">
                        <label for="edit-end-time">应用结束时间</label>
                        <input type="text" id="edit-end-time" placeholder="请选择结束时间">
                    </div>
                    <div class="form-group">
                        <label for="edit-duration">持续时长 (分钟)</label>
                        <input type="number" id="edit-duration" placeholder="请输入持续时长">
                    </div>
                </form>
                <div id="edit-error-msg" class="form-error" style="display: none; text-align: left; margin-top: 10px;"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary cancel-btn">取消</button>
                <button class="btn btn-primary save-btn">保存</button>
            </div>
        </div>
    </div>

    <!-- 隐藏的设备类型选择器，用于存储类型数据 -->
    <select id="add-device-type" style="display: none;">
        <!-- 设备类型将从Android后端动态加载 -->
    </select>
    
    <!-- 编辑设备的类型选择器 -->
    <select id="edit-device-type" style="display: none;"></select>

    <!-- 引入JavaScript库 -->
    <!-- 先加载jQuery和基础库 -->
    <script src="../lib/jquery.js"></script>
    <script src="../layui-v2.8.17/layui/layui.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/android-interface.js"></script>
    <script src="../js/widgets.js"></script>
    <script src="../js/warom-utils.js"></script>
    
    <!-- 再加载模拟数据 -->
    <script src="../js/mock/mock-device-data.js"></script>
    <script src="../js/mock/mock-user-data.js"></script>
    <script src="../js/mock/mock-operation-logs-data.js"></script>
    <script src="../js/mock/mock-Intelligentventilation-data.js"></script>
    <script src="../js/mock/mock-threshold-data.js"></script>
    
    <!-- 最后加载应用模块 -->
    <script src="../js/usermanager.js"></script>
    <script src="../js/operation-logs.js"></script>
    <script src="../js/settings-core.js"></script>
    <script src="../js/settings-device.js"></script>
    <script src="../js/settings-ventilation.js"></script>
    <script src="../js/settings-threshold.js"></script>
    <script src="../js/settings-account.js"></script>
    <script src="../js/settings.js"></script>
    
    <!-- VConsole 调试工具放在最后加载 -->
    <script src="../lib/vconsole/vconsole.min.js"></script>
    <script src="../js/vconsole-init.js"></script>
    
    <script>
        // 确保所有脚本加载完成后再初始化
        window.addEventListener('load', function() {
            // 初始化公共头部
            if (typeof initCommonHeader === 'function') {
                initCommonHeader('系统配置', true);
            }
            
            // 加载保存的主题
            if (typeof loadSavedTheme === 'function') {
                loadSavedTheme();
            }
            
            // 初始化智能通风配置
            if (typeof layui !== 'undefined') {
                layui.use(['laydate', 'element'], function(){
                    var laydate = layui.laydate;
                    var element = layui.element;
                    var activeRow = null;

                    console.log("LayUI and dependencies loaded. Initializing event listeners.");

                    // 初始化时间选择器
                    laydate.render({ elem: '#edit-start-time', type: 'time', format: 'HH:mm' });
                    laydate.render({ elem: '#edit-end-time', type: 'time', format: 'HH:mm' });

                    // 绑定事件
                    document.querySelectorAll('.edit-btn').forEach(button => {
                        button.addEventListener('click', function() {
                            console.log("Edit button clicked.");
                            showEditDialog(this.closest('tr'));
                        });
                    });

                    var editSaveBtn = document.querySelector('#edit-ventilation-dialog .save-btn');
                    var editCancelBtn = document.querySelector('#edit-ventilation-dialog .cancel-btn');
                    var editCloseBtn = document.querySelector('#edit-ventilation-dialog .close-btn');
                    var dialogOverlay = document.getElementById('dialog-overlay');
                    
                    if (editSaveBtn) editSaveBtn.addEventListener('click', saveChanges);
                    if (editCancelBtn) editCancelBtn.addEventListener('click', closeEditDialog);
                    if (editCloseBtn) editCloseBtn.addEventListener('click', closeEditDialog);
                    if (dialogOverlay) dialogOverlay.addEventListener('click', closeEditDialog);

                    // 初始化加载一次数据
                    if (typeof loadVentilationConfig === 'function') {
                        loadVentilationConfig();
                    }
                });
            }
        });
    </script>
</body>
</html>